<template>
  <div class="MessageInfo-container">
    <div class="table-wrap">
      <v-skeleton-loader
        v-if="tableLoading"
        height="100%"
        type="list-item@20"
      ></v-skeleton-loader>
      <Table
        v-else
        hide-default-footer
        addTooltip="Add Message Info"
        editTooltip="Edit Message Info"
        deleteTooltip="Delete Message Info"
        :headers="tableHeaders"
        :items="items"
        @add="openAddDialog"
        @delete="openDeleteDialog"
        @edit="openEditDialog"
      >
      </Table>
    </div>
    <Dialog
      persistent
      width="480"
      :title="dialogTitle"
      :show-save="step !== 3"
      v-model="showDialog"
      @submit="save"
    >
      <template>
        <AddEditMessageInfo
          v-if="[1, 2].includes(step)"
          ref="addEditMessageInfo"
        ></AddEditMessageInfo>
        <DeleteMessageInfo
          v-else-if="step === 3 && selectedItem"
          :messageInfo="selectedItem"
          @delete="deleteMessageInfo"
        ></DeleteMessageInfo>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import Table from "@/components/Maintenance/Table/Table.vue";
import AddEditMessageInfo from "@/components/Maintenance/Setting/MessageInfo/AddEditMessageInfo.vue";
import DeleteMessageInfo from "@/components/Maintenance/Setting/MessageInfo/DeleteMessageInfo.vue";
interface IMessageInfoItem {
  id: string;
  infoCode: string;
  infoDescription: string;
}
@Component({
  components: {
    Dialog,
    Table,
    AddEditMessageInfo,
    DeleteMessageInfo,
  },
})
export default class MessageInfo extends Vue {
  //1.AddMessageInfo 2.EditMessageInfo 3.DeleteMessageInfo
  step = -1;
  // table
  tableLoading = false;
  selectedItem: IMessageInfoItem | null = null;
  tableHeaders = [
    {
      text: "Info Code",
      sortable: false,
      value: "infoCode",
    },
    {
      text: "Info Description",
      sortable: false,
      value: "infoDescription",
    },
    {
      sortable: false,
      align: "right",
      value: "action",
    },
  ];
  items: IMessageInfoItem[] = [];

  getTableItems() {
    this.tableLoading = true;
    setTimeout(() => {
      this.items = [
        {
          id: "1",
          infoCode: "001",
          infoDescription: "System Implementation",
        },
        {
          id: "2",
          infoCode: "002",
          infoDescription: "System Implementation",
        },
        {
          id: "3",
          infoCode: "003",
          infoDescription: "System Implementation",
        },
        {
          id: "4",
          infoCode: "004",
          infoDescription: "System Implementation",
        },
        {
          id: "5",
          infoCode: "005",
          infoDescription: "System Implementation",
        },
        {
          id: "6",
          infoCode: "006",
          infoDescription: "System Implementation",
        },
        {
          id: "7",
          infoCode: "007",
          infoDescription: "System Implementation",
        },
        {
          id: "8",
          infoCode: "008",
          infoDescription: "System Implementation",
        },
      ];
      this.tableLoading = false;
    }, 1000);
  }
  // dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }

  openAddDialog() {
    this.step = 1;
    this.dialogTitle = "Add Message Info";
    this.$nextTick(() => {
      (this.$refs.addEditMessageInfo as AddEditMessageInfo).resetForm();
    });
    this.openDialog();
  }

  openEditDialog(item: IMessageInfoItem) {
    this.step = 2;
    this.dialogTitle = "Edit Message Info";
    this.$nextTick(() => {
      const addEditMessageInfoRef = this.$refs
        .addEditMessageInfo as AddEditMessageInfo;
      addEditMessageInfoRef.resetForm();
      setTimeout(() => {
        addEditMessageInfoRef.setFormData(item);
      });
    });
    this.openDialog();
  }

  openDeleteDialog(item: IMessageInfoItem) {
    this.step = 3;
    this.dialogTitle = "Delete Message Info";
    this.selectedItem = item;
    this.openDialog();
  }

  addMessageInfo(result: IMessageInfoItem) {
    result.id = String(new Date().getTime());
    this.items.push(result);
  }

  editMessageInfo(result: IMessageInfoItem) {
    const messageInfo = this.items.find(
      (item) => item.id === result.id
    ) as IMessageInfoItem;
    Object.assign(messageInfo, result);
  }

  deleteMessageInfo(messageInfoId: string) {
    const index = this.items.findIndex((item) => item.id === messageInfoId);
    this.items.splice(index, 1);
    this.selectedItem = null;
    this.closeDialog();
  }

  async save() {
    const addEditMessageInfoRef = this.$refs
      .addEditMessageInfo as AddEditMessageInfo;
    const result =
      (await addEditMessageInfoRef.validateFormData()) as IMessageInfoItem;
    if (result) {
      if (this.step === 1) {
        this.addMessageInfo(result);
      } else if (this.step === 2) {
        this.editMessageInfo(result);
      }
      this.closeDialog();
    }
  }

  mounted() {
    this.getTableItems();
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-file-export");
  }
}
</script>

<style lang="scss" scoped>
@import "./MessageInfo.scss";
</style>
